<demo>
## 自定义（全局）
加入你的想法
</demo>

<!-- #region snippet -->
<template>
    <a-space>
        <a-button
            type="primary"
            @click="handleShow()">
            自定义文案
        </a-button>
        <a-button
            type="primary"
            @click="handleCustomIcon()">
            自定义 icon
        </a-button>
        <a-button
            type="primary"
            @click="handleError()">
            加载失败
        </a-button>
    </a-space>
</template>

<script setup>
import { h } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { Loading } from '@/components'
import { message } from 'ant-design-vue'

defineOptions({
    name: 'GlobalCustom',
})

function handleShow() {
    Loading({
        description: '加载中',
    })

    hide()
}

function handleCustomIcon() {
    Loading({
        icon: LoadingOutlined,
    })

    hide()
}

function handleError() {
    Loading({
        icon: h('img', {
            style: { width: '140px', height: 'auto' },
            src: '',
        }),
        description: h('div', { class: 'mt-8-1 color-text' }, ['加载失败，', h('a', { onClick: reload }, '重新加载')]),
    })
}

/**
 * 隐藏
 * @param timeout
 */
function hide(timeout = 2000) {
    setTimeout(() => {
        Loading.destroy()
    }, timeout)
}

function reload() {
    Loading.destroy()
    message.success('点击了重新加载')
}
</script>

<style lang="less" scoped></style>
<!-- #endregion snippet -->
